import React, { useState } from 'react'
import { TruckOutline } from 'antd-mobile-icons'
import { useSelector, useDispatch } from 'react-redux'
import styles from './index.module.css'
import { ResultPage, Switch, Button, CalendarPickerView, Popup } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { excity, editdate } from '../../store/CitySlice'
import dayjs from 'dayjs'
function Index() {
    const navigate = useNavigate()
    const { start, end, date } = useSelector((state) => state.CitySlice)
    const dispatch = useDispatch()
    const [visible1, setVisible1] = useState(false)

    const handleCity = (type) => {
        navigate(`/city/${type}`)
    }

    const handleList = () => {
        navigate(`/list?start=${start}&end=${end}&date=${date}`)
    }
    return (
        <div>
            <ResultPage
                status=' '
                title='火车票'
                description='便捷购票，服务您的每一次出行'
            >
                <ResultPage.Card style={{ height: 300, padding: 8 }}>
                    <div className={styles.city_wroe}>
                        <span onClick={() => handleCity('start')}>{start}</span>
                        <span><TruckOutline onClick={() => dispatch(excity())} style={{ color: 'skyblue', fontSize: '25px' }} /></span>
                        <span onClick={() => handleCity('end')}>{end}</span>
                    </div>
                    <div className={styles.date_wroe}>
                        <span onClick={() => setVisible1(true)}>{date}</span>
                    </div>
                    <div className={styles.swc_wroe}>
                        <span><Switch /></span>
                        <span>高铁/动车</span>
                    </div>
                    <div className={styles.btn_wroe}>
                        <Button block color='primary' size='large' onClick={() => handleList()}>
                            登录
                        </Button>
                    </div>
                    <Popup
                        visible={visible1}
                        onMaskClick={() => {
                            setVisible1(false)
                        }}
                        onClose={() => {
                            setVisible1(false)
                        }}
                        bodyStyle={{ height: '60vh' }}
                    >
                        <CalendarPickerView
                            min={dayjs()}
                            max={dayjs(dayjs().add(13, 'day'))}
                            onChange={(val) => {
                                dispatch(editdate({ date: dayjs(val).format('YYYY-MM-DD') }))
                                setVisible1(false)
                            }}
                        />
                    </Popup>
                </ResultPage.Card>
            </ResultPage>
        </div>
    )
}

export default Index
